<template>
	<view>
		<!-- pages/user/integral/index.wxml -->
		<!-- 头部 -->
		<navber id="head-navber" :navbarData="navbarData"></navber>
		<van-tabs :swipe-threshold="3" color="#FFDC8D" :active="index" @change="selectLabel">
			<van-tab title="我的直属" :name="1">
				<view class="but-bg-hr"></view>
				<!-- 粉丝列表 -->
				<view class="integral">
					<view class="integral-info">
						<image :src="imgUrl + '/imgs/user/popularize/bac.png'" class="integral-info-img"></image>
						<view class="statistics">
							<view class="statistics-item">
								<view class="integral-info-title">- 当前推广 -</view>
								<view class="integral-info-number">{{ totalCount }}人</view>
							</view>
							<view class="statistics-item">
								<view class="integral-info-title">- 当天业绩 -</view>
								<view class="integral-info-number">
									{{ dayCost>10000?(dayCost/10000).toFixed(2)+"W":dayCost}}
								</view>
							</view>

							<view class="statistics-item">
								<view class="integral-info-title">- 总消费金额 -</view>
								<view class="integral-info-number">
									{{ totalCost>10000?(totalCost/10000).toFixed(2)+"W":totalCost}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="time-s">
					<u-datetime-picker :show="show" v-model="timeDay" mode="date" @c @confirm="onConfirm"
						@cancel="onCancel">
					</u-datetime-picker>
					<view class="time_day_str" @click="show = true">{{timeDayStr}}</view>
				</view>
				<view class="integral-list">
					<view class="integral-list-item">
						<view class="integral-list-item-text2">
							<view class="nick">手机号</view>
						</view>
						<view class="integral-list-item-text3">
							当天业绩
						</view>
						<view class="integral-list-item-text3">
							总业绩
						</view>
						<view class="integral-list-item-text4">
							<view class="nick">级别</view>
						</view>
					</view>
					<view class="integral-list-item" v-for="(item, index) in dataList" :key="index">
						<view class="integral-list-item-text2">
							<view class="nick">{{ item.phone }}</view>
						</view>

						<view class="integral-list-item-text3">
							{{ item.day_total>10000?(item.day_total/10000).toFixed(2)+"W":item.day_total}}
						</view>
						<view class="integral-list-item-text3">
							{{ item.total>10000?(item.total/10000).toFixed(2)+"W":item.total}}
						</view>
						<view class="integral-list-item-text4">{{ item.level }}</view>
					</view>
				</view>
			</van-tab>
			<van-tab title="团队总量" :name="2">
				<view class="but-bg-hr"></view>
				<view class="integral">
					<view class="integral-info">
						<image :src="imgUrl + '/imgs/user/popularize/bac.png'" class="integral-info-img"></image>
						<view class="statistics">
							<view class="statistics-item">
								<view class="integral-info-title">- 团队总人数 -</view>
								<view class="integral-info-number">{{ totalCount }}人</view>
							</view>
							<view class="statistics-item">
								<view class="integral-info-title">- 当天业绩 -</view>
								<view class="integral-info-number">
									{{ dayCost>10000?(dayCost/10000).toFixed(2)+"W":dayCost}}
								</view>
							</view>

							<view class="statistics-item">
								<view class="integral-info-title">- 团队总业绩 -</view>
								<view class="integral-info-number">
									{{ totalCost>10000?(totalCost/10000).toFixed(2)+"W":totalCost}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="time-s">
					<u-datetime-picker :show="show" v-model="timeDay" mode="date" @c @confirm="onConfirm"
						@cancel="onCancel">
					</u-datetime-picker>
					<view class="time_day_str" @click="show = true">{{timeDayStr}}</view>
				</view>
				<!-- 粉丝列表 -->
				<view class="integral-list">
					<view class="integral-list-item">
						<view class="integral-list-item-text2">
							<view class="nick">手机号</view>
						</view>
						<view class="integral-list-item-text2">
							<view class="nick">当天业绩</view>
						</view>
						<view class="integral-list-item-text2">
							<view class="nick">总业绩</view>
						</view>
						<view class="integral-list-item-text6">
							<view class="nick">详情</view>
						</view>
					</view>
					<view class="integral-list-item" v-for="(item, index) in dataList" :key="index">
						<view class="integral-list-item-text2">
							<view class="nick">{{ item.phone }}</view>
						</view>

						<view class="integral-list-item-text2">
							<view class="nick">{{ item.day_all>10000?(item.day_all/10000).toFixed(2)+"W":item.day_all}}
							</view>
						</view>
						<view class="integral-list-item-text2">
							<view class="nick">{{ item.sum_all>10000?(item.sum_all/10000).toFixed(2)+"W":item.sum_all}}
							</view>
						</view>
						<view class="integral-list-item-text6">
							<span v-if="item.X4>0">4星{{item.X4}}位,</span>
							<span v-if="item.X3>0">3星{{item.X3}}位,</span>
							<span v-if="item.X2>0">2星{{item.X2}}位,</span>
							<span v-if="item.X1>0">1星{{item.X1}}位,</span>
						</view>
					</view>
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import navber from '@/components/navber/index';
	// pages/user/integral/index.js
	const Config = require('../../../config/index.js');

	const Api = require('../../../api/index.js');

	export default {
		components: {
			navber
		},
		data() {
			return {
				navbarData: {
					title: '我的团队' //顶部标题
				},

				//导航栏
				imgUrl: Config.imgUrl,

				//图片url
				dataList: [],

				pagenow: 1,
				index: 1,
				type: 0,
				totalCount: 0, //推广人数
				//当天业绩
				dayCost: 0,
				//推广总消费额
				totalCost: 0,
				butCheck: '',
				timeDayStr: this.FormatTime(new Date()), //
				timeDay: Number(new Date()), //截止时间（倒退十天记录)
				show: false
			};
		},
		onReachBottom: function(e) {
			//滚动底部
			this.getData();
		},
		onShow() {
			this.setData({
				pagenow: 1,
				dataList: []
			});
			this.getData();
		},
		onPullDownRefresh(e) {
			this.getData(true);
			uni.stopPullDownRefresh();
		},
		methods: {
			onConfirm(e) {
				// console.log(e);
				this.timeDay = e.value;
				// console.log(this.timeDay);
				this.timeDayStr = this.FormatTime(new Date(this.timeDay));
				// console.log(this.timeDayStr);
				this.show = false;
				this.getData(true);
			},
			onCancel() {
				this.show = false;
			},
			switch_check(e) {
				this.setData({
					butCheck: e.currentTarget.dataset.value
				});
			},

			selectLabel(event) {
				var index = event.detail.index;
				this.setData({
					type: index
				}); //选择项

				this.getData(true);
			},

			getData(is_update = false) {
				//获取数据
				if (is_update) {
					this.dataList = [];
					this.pagenow = 1;
					this.totalCount = 0;
					this.totalCost = 0;
				}
				var json = {
					page: this.pagenow,
					limit: 15,
					type: this.type,
					day: this.timeDayStr,
					lose: 0
				};
				Api.userPopList(json).then((res) => {
					if (res.data.pageList.length > 0) {
						var data = this.dataList;
						data = data.concat(res.data.pageList);
						var totalCount = res.data.totalCount;
						var totalCost = res.data.totalCost + this.totalCost;
						var dayCost = res.data.dayCost;
						var page = this.pagenow + 1;
						this.setData({
							pagenow: page,
							totalCount: totalCount,
							totalCost: totalCost,
							dayCost: dayCost,
							dataList: data
						});
					} else {
						uni.showToast({
							title: '暂无数据',
							icon: 'none',
							duration: 2000
						});
					} // wx.stopPullDownRefresh();
				});
			},
			FormatTime(dat) {
				//获取年月日，时间
				var year = dat.getFullYear();
				var mon = (dat.getMonth() + 1) < 10 ? "0" + (dat.getMonth() + 1) : dat.getMonth() + 1;
				var data = dat.getDate() < 10 ? "0" + (dat.getDate()) : dat.getDate();
				var newDate = year + "-" + mon + "-" + data
				return newDate;
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>
